<template>
  <view id="userinfo">
    <view class="body">
      <view class="son">
        <view class="sonleft">收货人</view>
        <view class="sonright">
          <input type="text" v-model="name" placeholder="请输入收货人" />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">性别</view>
        <view class="sonright">
          <view
            class="man"
            :class="{ manactive: selectman === i }"
            v-for="(item, i) in manlist"
            :key="i"
            @click="showman(i)"
            >{{ item.name }}</view
          >
        </view>
      </view>

      <view class="son">
        <view class="sonleft">联系方式</view>
        <view class="sonright">
          <input
            type="text"
            v-model="phone"
            placeholder="请输入收货人联系方式"
          />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">收货地址</view>
        <view class="sonright">
          <input type="text" v-model="address" placeholder="请选择收货地址" />
        </view>
      </view>

      <view class="son">
        <view class="sonleft">门牌号</view>
        <view class="sonright">
          <input
            type="text"
            v-model="site"
            placeholder="请输入收货人详细地址吧"
          />
        </view>
      </view>
    </view>

    <view class="botbox">
      <u-button class="botbut" @click="addAddress()">保存</u-button>
    </view>
  </view>
</template>


<script setup>
import { ref, computed } from "vue";
import { useStore } from "vuex";

const store = useStore();
const name = ref("");
const phone = ref("");
const address = ref("");
const site = ref("");
const sex = ref("先生");

const addAddress = () => {
  store.dispatch("addAddress", {
    name: name.value,
    address: address.value,
    phone: phone.value,
    site: site.value,
    sex: sex.value,
  });

  // 清空输入框
  name.value = "";
  address.value = "";
  phone.value = "";
  site.value = "";
  sex.value = "";
  uni.navigateBack({
    delta: 1,
  });
};

const manlist = ref([
  {
    name: "先生",
    check: true,
  },
  {
    name: "女士",
    check: false,
  },
]);
const selectman = ref(0);
const showman = (i) => {
  manlist.value.forEach((item, index) => {
    item.check = index === i;
  });
  selectman.value = manlist.value.findIndex((item) => item.check);
  const itemName = manlist.value[i].name;
  // console.log(itemName,111);
  sex.value = itemName;
  console.log(sex.value, 23);
};

// const submit = () => {
//   //判断stateshow是否为true，判断多选框是否选中
//   if (formname.value && formphone.value) {
//     console.log("提交");
//     store.commit("setUserInfo", {
//       name: formname.value,
//       phone: formphone.value,
//     });
//     uni.navigateBack({
//       delta: 1,
//     });
//   } else {
//     uni.showToast({
//       title: "请填写完整信息",
//       icon: "none",
//     });
//   }
// };
</script>

<style lang="scss">
#userinfo {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background-color: #f0f8fa;
  padding-top: 20rpx;
  .botbox {
    width: 100%;
    height: 120rpx;
    position: fixed;
    bottom: 0;
    .botbut {
      width: 88%;
      margin: auto;
      background-color: #adb838;
      color: #fff;
      border-radius: 50rpx;
    }
  }
  .body {
    width: 94%;
    margin: auto;
    background-color: #fff;
    .son {
      width: 100%;
      height: 100rpx;
      background-color: #fff;
      border-bottom: solid 3rpx #f1f1f1;
      display: flex;
      align-items: center;
      padding: 0 20rpx;
      box-sizing: border-box;
      .sonleft {
        width: 180rpx;
      }
      .sonright {
        flex: 1;
        display: flex;
        input {
          height: 100%;
          border: none;
          outline: none;
          font-size: 26rpx;
          color: #959698;
        }
        .man {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #959698;
        }
        .manactive {
          display: inline-block;
          border: solid 2rpx #959698;
          padding: 10rpx 30rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          color: #fff;
          background-color: #adb838;
        }
      }
    }
  }
}
</style>
